<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>

      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=740005" target="_blank" class="nav-more">查看项目</a>

    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">

            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">对勾</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">dot</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe7f0;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">dot</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">folder-open</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">旋转</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">handbook</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">add-o</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">delete-o</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">下双箭头</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">清除选择-选中</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">统计</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">设备管理</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">空间</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">包裹占压</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">隐患管理</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">基础数据</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">电子地图</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">导航-选中</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">单选-选中</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">多边形选择-选中</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">复选-选中</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">复选</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">管网巡线</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">工具-选中</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">拉框选择-选中</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">全图</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">筛选下拉-白</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">筛选下拉</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">搜索-小</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">图层-选中</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">图层配置-选中</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">图例</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">位置-选中</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">下拉-选中</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">向后</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">向前</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">选点-选中</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">x</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">移动</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">对</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">上一页</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">下一页</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">单选</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">复选-选中</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">复选</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">单选-选中</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">单选</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">筛选下拉</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">末页</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">slidebtn-yes</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">slidebtn-no</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">消息管理</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">工地管理</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">巡检计划管理</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">城市综合体</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">ddd-folder</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">向右</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">向左</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">状态-等待</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">处理完成</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">状态-处理中</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">状态-协同处理</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">状态-暂停</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">状态-转移</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">状态-完成</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xea7a;</span>
                <div class="name">绑定域名-01</div>
                <div class="code-name">&amp;#xea7a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">状态-回报</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">状态-派单</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">状态-转单</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">状态-作废</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">状态-审核</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">状态-协同</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">官网巡线1</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">图例1</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">状态-驳回</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">状态-驳回空心</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">状态-转移空心</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">华润燃气logo</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">华润</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">定位点</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">测面积</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">测距离</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">接单</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">派单</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">通过</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">退单</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">作废</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">待处理</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">已驳回</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">已处理</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">已接单</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">已派单</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">已取消</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">已审核</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">已退单</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">非换表维修</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">非勘察挂表业务</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">挂表业务</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">挂表勘察</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">启封通气</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">现场改造</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">换表维修</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">改造勘察</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">材料管理</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">调度</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">动态表单管理</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">文件系统管理</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">短信管理</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">系统权限管理</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">主数据管理</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">流程管理</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">app版本管理</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">取消</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">预约</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>

            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>

          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <span class="icon iconfont icon-zoom-out"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-zoom-out
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zoom-in"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.icon-zoom-in
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-setFun"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-setFun
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-duigou"></span>
            <div class="name">
              对勾
            </div>
            <div class="code-name">.icon-duigou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tupian1"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dot"></span>
            <div class="name">
              dot
            </div>
            <div class="code-name">.icon-dot
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-quit"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-quit
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-star1"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-star1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              dot
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-folderopen"></span>
            <div class="name">
              folder-open
            </div>
            <div class="code-name">.icon-folderopen
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-icon_rotate"></span>
            <div class="name">
              旋转
            </div>
            <div class="code-name">.icon-icon_rotate
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-msg"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-msg
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-daoru"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-read"></span>
            <div class="name">
              handbook
            </div>
            <div class="code-name">.icon-read
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-biaoqian"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-biaoqian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-add-o"></span>
            <div class="name">
              add-o
            </div>
            <div class="code-name">.icon-add-o
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-delete-o"></span>
            <div class="name">
              delete-o
            </div>
            <div class="code-name">.icon-delete-o
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiashuangjiantou"></span>
            <div class="name">
              下双箭头
            </div>
            <div class="code-name">.icon-xiashuangjiantou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-qingchuxuanze"></span>
            <div class="name">
              清除选择-选中
            </div>
            <div class="code-name">.icon-qingchuxuanze
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tongji"></span>
            <div class="name">
              统计
            </div>
            <div class="code-name">.icon-tongji
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shebeiguanli"></span>
            <div class="name">
              设备管理
            </div>
            <div class="code-name">.icon-shebeiguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-kongjian"></span>
            <div class="name">
              空间
            </div>
            <div class="code-name">.icon-kongjian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-baoguozhanya"></span>
            <div class="name">
              包裹占压
            </div>
            <div class="code-name">.icon-baoguozhanya
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yinhuanguanli"></span>
            <div class="name">
              隐患管理
            </div>
            <div class="code-name">.icon-yinhuanguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jichushuju"></span>
            <div class="name">
              基础数据
            </div>
            <div class="code-name">.icon-jichushuju
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dianziditu"></span>
            <div class="name">
              电子地图
            </div>
            <div class="code-name">.icon-dianziditu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-daohang"></span>
            <div class="name">
              导航-选中
            </div>
            <div class="code-name">.icon-daohang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-danxuan-xuanzhong"></span>
            <div class="name">
              单选-选中
            </div>
            <div class="code-name">.icon-danxuan-xuanzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-duobianxingxuanze"></span>
            <div class="name">
              多边形选择-选中
            </div>
            <div class="code-name">.icon-duobianxingxuanze
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fuxuan-xuanzhong"></span>
            <div class="name">
              复选-选中
            </div>
            <div class="code-name">.icon-fuxuan-xuanzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fuxuan"></span>
            <div class="name">
              复选
            </div>
            <div class="code-name">.icon-fuxuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guanwangxunxian"></span>
            <div class="name">
              管网巡线
            </div>
            <div class="code-name">.icon-guanwangxunxian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fangda"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.icon-fangda
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-gongju"></span>
            <div class="name">
              工具-选中
            </div>
            <div class="code-name">.icon-gongju
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-lakuangxuanze"></span>
            <div class="name">
              拉框选择-选中
            </div>
            <div class="code-name">.icon-lakuangxuanze
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-quantu"></span>
            <div class="name">
              全图
            </div>
            <div class="code-name">.icon-quantu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shaixuanshangla"></span>
            <div class="name">
              筛选下拉-白
            </div>
            <div class="code-name">.icon-shaixuanshangla
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shaixuanxiala"></span>
            <div class="name">
              筛选下拉
            </div>
            <div class="code-name">.icon-shaixuanxiala
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-delete-1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-delete-1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-sousuo-xiao"></span>
            <div class="name">
              搜索-小
            </div>
            <div class="code-name">.icon-sousuo-xiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tuceng"></span>
            <div class="name">
              图层-选中
            </div>
            <div class="code-name">.icon-tuceng
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tucengpeizhi"></span>
            <div class="name">
              图层配置-选中
            </div>
            <div class="code-name">.icon-tucengpeizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tuli"></span>
            <div class="name">
              图例
            </div>
            <div class="code-name">.icon-tuli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-weizhi"></span>
            <div class="name">
              位置-选中
            </div>
            <div class="code-name">.icon-weizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-drop-down"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-drop-down
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-drop-up"></span>
            <div class="name">
              下拉-选中
            </div>
            <div class="code-name">.icon-drop-up
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xianghou"></span>
            <div class="name">
              向后
            </div>
            <div class="code-name">.icon-xianghou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiangqian"></span>
            <div class="name">
              向前
            </div>
            <div class="code-name">.icon-xiangqian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xuandian"></span>
            <div class="name">
              选点-选中
            </div>
            <div class="code-name">.icon-xuandian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-x"></span>
            <div class="name">
              x
            </div>
            <div class="code-name">.icon-x
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yidong"></span>
            <div class="name">
              移动
            </div>
            <div class="code-name">.icon-yidong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-round-tick"></span>
            <div class="name">
              对
            </div>
            <div class="code-name">.icon-round-tick
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-menu-left"></span>
            <div class="name">
              上一页
            </div>
            <div class="code-name">.icon-menu-left
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-menu-right"></span>
            <div class="name">
              下一页
            </div>
            <div class="code-name">.icon-menu-right
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-danxuan"></span>
            <div class="name">
              单选
            </div>
            <div class="code-name">.icon-danxuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fuxuan-xuanzhong-variable"></span>
            <div class="name">
              复选-选中
            </div>
            <div class="code-name">.icon-fuxuan-xuanzhong-variable
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-fuxuan-variable"></span>
            <div class="name">
              复选
            </div>
            <div class="code-name">.icon-fuxuan-variable
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-danxuan-xuanzhong-variable"></span>
            <div class="name">
              单选-选中
            </div>
            <div class="code-name">.icon-danxuan-xuanzhong-variable
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-danxuan-variable"></span>
            <div class="name">
              单选
            </div>
            <div class="code-name">.icon-danxuan-variable
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shaixuanxiala-copy"></span>
            <div class="name">
              筛选下拉
            </div>
            <div class="code-name">.icon-shaixuanxiala-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-suoxiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-moye"></span>
            <div class="name">
              末页
            </div>
            <div class="code-name">.icon-moye
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-slidebtn-yes"></span>
            <div class="name">
              slidebtn-yes
            </div>
            <div class="code-name">.icon-slidebtn-yes
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-eye"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-slidebtn-no"></span>
            <div class="name">
              slidebtn-no
            </div>
            <div class="code-name">.icon-slidebtn-no
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiaoxiguanli"></span>
            <div class="name">
              消息管理
            </div>
            <div class="code-name">.icon-xiaoxiguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-gongdiguanli"></span>
            <div class="name">
              工地管理
            </div>
            <div class="code-name">.icon-gongdiguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xunjianjihuaguanli"></span>
            <div class="name">
              巡检计划管理
            </div>
            <div class="code-name">.icon-xunjianjihuaguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-chengshizongheti"></span>
            <div class="name">
              城市综合体
            </div>
            <div class="code-name">.icon-chengshizongheti
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-ddd-folder"></span>
            <div class="name">
              ddd-folder
            </div>
            <div class="code-name">.icon-ddd-folder
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiangyou"></span>
            <div class="name">
              向右
            </div>
            <div class="code-name">.icon-xiangyou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiangzuo"></span>
            <div class="name">
              向左
            </div>
            <div class="code-name">.icon-xiangzuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-waite"></span>
            <div class="name">
              状态-等待
            </div>
            <div class="code-name">.icon-status-waite
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-chuliwancheng"></span>
            <div class="name">
              处理完成
            </div>
            <div class="code-name">.icon-chuliwancheng
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-processing"></span>
            <div class="name">
              状态-处理中
            </div>
            <div class="code-name">.icon-status-processing
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-together"></span>
            <div class="name">
              状态-协同处理
            </div>
            <div class="code-name">.icon-status-together
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-pause"></span>
            <div class="name">
              状态-暂停
            </div>
            <div class="code-name">.icon-status-pause
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-transfer"></span>
            <div class="name">
              状态-转移
            </div>
            <div class="code-name">.icon-status-transfer
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-complete"></span>
            <div class="name">
              状态-完成
            </div>
            <div class="code-name">.icon-status-complete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangdingyuming"></span>
            <div class="name">
              绑定域名-01
            </div>
            <div class="code-name">.icon-bangdingyuming
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-eye1"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-reciprocation"></span>
            <div class="name">
              状态-回报
            </div>
            <div class="code-name">.icon-status-reciprocation
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-dispatch"></span>
            <div class="name">
              状态-派单
            </div>
            <div class="code-name">.icon-status-dispatch
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-transfer-order"></span>
            <div class="name">
              状态-转单
            </div>
            <div class="code-name">.icon-status-transfer-order
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-obsolete"></span>
            <div class="name">
              状态-作废
            </div>
            <div class="code-name">.icon-status-obsolete
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-review"></span>
            <div class="name">
              状态-审核
            </div>
            <div class="code-name">.icon-status-review
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-together1"></span>
            <div class="name">
              状态-协同
            </div>
            <div class="code-name">.icon-status-together1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guanwangxunxian1"></span>
            <div class="name">
              官网巡线1
            </div>
            <div class="code-name">.icon-guanwangxunxian1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tuli1"></span>
            <div class="name">
              图例1
            </div>
            <div class="code-name">.icon-tuli1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-news"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-news
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-calendar"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-calendar
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-overrule"></span>
            <div class="name">
              状态-驳回
            </div>
            <div class="code-name">.icon-status-overrule
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-overrule-outline"></span>
            <div class="name">
              状态-驳回空心
            </div>
            <div class="code-name">.icon-status-overrule-outline
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-status-transfer-outline"></span>
            <div class="name">
              状态-转移空心
            </div>
            <div class="code-name">.icon-status-transfer-outline
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-huarunranqilogo"></span>
            <div class="name">
              华润燃气logo
            </div>
            <div class="code-name">.icon-huarunranqilogo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-huarun"></span>
            <div class="name">
              华润
            </div>
            <div class="code-name">.icon-huarun
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-location-point"></span>
            <div class="name">
              定位点
            </div>
            <div class="code-name">.icon-location-point
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-measuring-area"></span>
            <div class="name">
              测面积
            </div>
            <div class="code-name">.icon-measuring-area
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-measuring-distance"></span>
            <div class="name">
              测距离
            </div>
            <div class="code-name">.icon-measuring-distance
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-play"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-play
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-pause"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-pause
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-jiedan"></span>
            <div class="name">
              接单
            </div>
            <div class="code-name">.icon-jiedan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-paidan"></span>
            <div class="name">
              派单
            </div>
            <div class="code-name">.icon-paidan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tongguo"></span>
            <div class="name">
              通过
            </div>
            <div class="code-name">.icon-tongguo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tuidan"></span>
            <div class="name">
              退单
            </div>
            <div class="code-name">.icon-tuidan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zuofei1"></span>
            <div class="name">
              作废
            </div>
            <div class="code-name">.icon-zuofei1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-daichuli"></span>
            <div class="name">
              待处理
            </div>
            <div class="code-name">.icon-daichuli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yibohui"></span>
            <div class="name">
              已驳回
            </div>
            <div class="code-name">.icon-yibohui
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yichuli"></span>
            <div class="name">
              已处理
            </div>
            <div class="code-name">.icon-yichuli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yijiedan"></span>
            <div class="name">
              已接单
            </div>
            <div class="code-name">.icon-yijiedan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yipaidan"></span>
            <div class="name">
              已派单
            </div>
            <div class="code-name">.icon-yipaidan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yiquxiao"></span>
            <div class="name">
              已取消
            </div>
            <div class="code-name">.icon-yiquxiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yishenhe"></span>
            <div class="name">
              已审核
            </div>
            <div class="code-name">.icon-yishenhe
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yituidan"></span>
            <div class="name">
              已退单
            </div>
            <div class="code-name">.icon-yituidan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-feihuanbiaoweixiu"></span>
            <div class="name">
              非换表维修
            </div>
            <div class="code-name">.icon-feihuanbiaoweixiu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-feikanchaguabiaoyewu"></span>
            <div class="name">
              非勘察挂表业务
            </div>
            <div class="code-name">.icon-feikanchaguabiaoyewu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guabiaoyewu"></span>
            <div class="name">
              挂表业务
            </div>
            <div class="code-name">.icon-guabiaoyewu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-guabiaokancha"></span>
            <div class="name">
              挂表勘察
            </div>
            <div class="code-name">.icon-guabiaokancha
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-qifengtongqi"></span>
            <div class="name">
              启封通气
            </div>
            <div class="code-name">.icon-qifengtongqi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xianchanggaizao"></span>
            <div class="name">
              现场改造
            </div>
            <div class="code-name">.icon-xianchanggaizao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-huanbiaoweixiu"></span>
            <div class="name">
              换表维修
            </div>
            <div class="code-name">.icon-huanbiaoweixiu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-gaizaokancha"></span>
            <div class="name">
              改造勘察
            </div>
            <div class="code-name">.icon-gaizaokancha
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-cailiaoguanli"></span>
            <div class="name">
              材料管理
            </div>
            <div class="code-name">.icon-cailiaoguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-ditu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-tiaodu"></span>
            <div class="name">
              调度
            </div>
            <div class="code-name">.icon-tiaodu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-dongtaibiaodanguanli"></span>
            <div class="name">
              动态表单管理
            </div>
            <div class="code-name">.icon-dongtaibiaodanguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-shouye1"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-wenjianxitongguanli"></span>
            <div class="name">
              文件系统管理
            </div>
            <div class="code-name">.icon-wenjianxitongguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-duanxinguanli"></span>
            <div class="name">
              短信管理
            </div>
            <div class="code-name">.icon-duanxinguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xitongquanxianguanli"></span>
            <div class="name">
              系统权限管理
            </div>
            <div class="code-name">.icon-xitongquanxianguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-zhushujuguanli"></span>
            <div class="name">
              主数据管理
            </div>
            <div class="code-name">.icon-zhushujuguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-liuchengguanli"></span>
            <div class="name">
              流程管理
            </div>
            <div class="code-name">.icon-liuchengguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-appbanbenguanli"></span>
            <div class="name">
              app版本管理
            </div>
            <div class="code-name">.icon-appbanbenguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-quxiao"></span>
            <div class="name">
              取消
            </div>
            <div class="code-name">.icon-quxiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-yuyue"></span>
            <div class="name">
              预约
            </div>
            <div class="code-name">.icon-yuyue
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-icon-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.icon-icon-minus
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icon-xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-xiala
            </div>
          </li>

        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-out"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-zoom-out</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-in"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#icon-zoom-in</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setFun"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-setFun</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duigou"></use>
                </svg>
                <div class="name">对勾</div>
                <div class="code-name">#icon-duigou</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian1"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dot"></use>
                </svg>
                <div class="name">dot</div>
                <div class="code-name">#icon-dot</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quit"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-quit</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star1"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#icon-star1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">dot</div>
                <div class="code-name">#icon-more</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderopen"></use>
                </svg>
                <div class="name">folder-open</div>
                <div class="code-name">#icon-folderopen</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_rotate"></use>
                </svg>
                <div class="name">旋转</div>
                <div class="code-name">#icon-icon_rotate</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-msg"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-msg</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-read"></use>
                </svg>
                <div class="name">handbook</div>
                <div class="code-name">#icon-read</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqian"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-biaoqian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-o"></use>
                </svg>
                <div class="name">add-o</div>
                <div class="code-name">#icon-add-o</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-o"></use>
                </svg>
                <div class="name">delete-o</div>
                <div class="code-name">#icon-delete-o</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiashuangjiantou"></use>
                </svg>
                <div class="name">下双箭头</div>
                <div class="code-name">#icon-xiashuangjiantou</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingchuxuanze"></use>
                </svg>
                <div class="name">清除选择-选中</div>
                <div class="code-name">#icon-qingchuxuanze</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongji"></use>
                </svg>
                <div class="name">统计</div>
                <div class="code-name">#icon-tongji</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeiguanli"></use>
                </svg>
                <div class="name">设备管理</div>
                <div class="code-name">#icon-shebeiguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kongjian"></use>
                </svg>
                <div class="name">空间</div>
                <div class="code-name">#icon-kongjian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoguozhanya"></use>
                </svg>
                <div class="name">包裹占压</div>
                <div class="code-name">#icon-baoguozhanya</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhuanguanli"></use>
                </svg>
                <div class="name">隐患管理</div>
                <div class="code-name">#icon-yinhuanguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichushuju"></use>
                </svg>
                <div class="name">基础数据</div>
                <div class="code-name">#icon-jichushuju</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianziditu"></use>
                </svg>
                <div class="name">电子地图</div>
                <div class="code-name">#icon-dianziditu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daohang"></use>
                </svg>
                <div class="name">导航-选中</div>
                <div class="code-name">#icon-daohang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan-xuanzhong"></use>
                </svg>
                <div class="name">单选-选中</div>
                <div class="code-name">#icon-danxuan-xuanzhong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duobianxingxuanze"></use>
                </svg>
                <div class="name">多边形选择-选中</div>
                <div class="code-name">#icon-duobianxingxuanze</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuxuan-xuanzhong"></use>
                </svg>
                <div class="name">复选-选中</div>
                <div class="code-name">#icon-fuxuan-xuanzhong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuxuan"></use>
                </svg>
                <div class="name">复选</div>
                <div class="code-name">#icon-fuxuan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanwangxunxian"></use>
                </svg>
                <div class="name">管网巡线</div>
                <div class="code-name">#icon-guanwangxunxian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangda"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#icon-fangda</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongju"></use>
                </svg>
                <div class="name">工具-选中</div>
                <div class="code-name">#icon-gongju</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lakuangxuanze"></use>
                </svg>
                <div class="name">拉框选择-选中</div>
                <div class="code-name">#icon-lakuangxuanze</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quantu"></use>
                </svg>
                <div class="name">全图</div>
                <div class="code-name">#icon-quantu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuanshangla"></use>
                </svg>
                <div class="name">筛选下拉-白</div>
                <div class="code-name">#icon-shaixuanshangla</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuanxiala"></use>
                </svg>
                <div class="name">筛选下拉</div>
                <div class="code-name">#icon-shaixuanxiala</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-delete-1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo-xiao"></use>
                </svg>
                <div class="name">搜索-小</div>
                <div class="code-name">#icon-sousuo-xiao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuceng"></use>
                </svg>
                <div class="name">图层-选中</div>
                <div class="code-name">#icon-tuceng</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tucengpeizhi"></use>
                </svg>
                <div class="name">图层配置-选中</div>
                <div class="code-name">#icon-tucengpeizhi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuli"></use>
                </svg>
                <div class="name">图例</div>
                <div class="code-name">#icon-tuli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weizhi"></use>
                </svg>
                <div class="name">位置-选中</div>
                <div class="code-name">#icon-weizhi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drop-down"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-drop-down</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drop-up"></use>
                </svg>
                <div class="name">下拉-选中</div>
                <div class="code-name">#icon-drop-up</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianghou"></use>
                </svg>
                <div class="name">向后</div>
                <div class="code-name">#icon-xianghou</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangqian"></use>
                </svg>
                <div class="name">向前</div>
                <div class="code-name">#icon-xiangqian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuandian"></use>
                </svg>
                <div class="name">选点-选中</div>
                <div class="code-name">#icon-xuandian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-x"></use>
                </svg>
                <div class="name">x</div>
                <div class="code-name">#icon-x</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidong"></use>
                </svg>
                <div class="name">移动</div>
                <div class="code-name">#icon-yidong</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-edit</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-round-tick"></use>
                </svg>
                <div class="name">对</div>
                <div class="code-name">#icon-round-tick</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-delete</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu-left"></use>
                </svg>
                <div class="name">上一页</div>
                <div class="code-name">#icon-menu-left</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu-right"></use>
                </svg>
                <div class="name">下一页</div>
                <div class="code-name">#icon-menu-right</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan"></use>
                </svg>
                <div class="name">单选</div>
                <div class="code-name">#icon-danxuan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuxuan-xuanzhong-variable"></use>
                </svg>
                <div class="name">复选-选中</div>
                <div class="code-name">#icon-fuxuan-xuanzhong-variable</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuxuan-variable"></use>
                </svg>
                <div class="name">复选</div>
                <div class="code-name">#icon-fuxuan-variable</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan-xuanzhong-variable"></use>
                </svg>
                <div class="name">单选-选中</div>
                <div class="code-name">#icon-danxuan-xuanzhong-variable</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan-variable"></use>
                </svg>
                <div class="name">单选</div>
                <div class="code-name">#icon-danxuan-variable</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuanxiala-copy"></use>
                </svg>
                <div class="name">筛选下拉</div>
                <div class="code-name">#icon-shaixuanxiala-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-suoxiao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moye"></use>
                </svg>
                <div class="name">末页</div>
                <div class="code-name">#icon-moye</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slidebtn-yes"></use>
                </svg>
                <div class="name">slidebtn-yes</div>
                <div class="code-name">#icon-slidebtn-yes</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slidebtn-no"></use>
                </svg>
                <div class="name">slidebtn-no</div>
                <div class="code-name">#icon-slidebtn-no</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxiguanli"></use>
                </svg>
                <div class="name">消息管理</div>
                <div class="code-name">#icon-xiaoxiguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongdiguanli"></use>
                </svg>
                <div class="name">工地管理</div>
                <div class="code-name">#icon-gongdiguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjianjihuaguanli"></use>
                </svg>
                <div class="name">巡检计划管理</div>
                <div class="code-name">#icon-xunjianjihuaguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengshizongheti"></use>
                </svg>
                <div class="name">城市综合体</div>
                <div class="code-name">#icon-chengshizongheti</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ddd-folder"></use>
                </svg>
                <div class="name">ddd-folder</div>
                <div class="code-name">#icon-ddd-folder</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou"></use>
                </svg>
                <div class="name">向右</div>
                <div class="code-name">#icon-xiangyou</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangzuo"></use>
                </svg>
                <div class="name">向左</div>
                <div class="code-name">#icon-xiangzuo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-waite"></use>
                </svg>
                <div class="name">状态-等待</div>
                <div class="code-name">#icon-status-waite</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuliwancheng"></use>
                </svg>
                <div class="name">处理完成</div>
                <div class="code-name">#icon-chuliwancheng</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-processing"></use>
                </svg>
                <div class="name">状态-处理中</div>
                <div class="code-name">#icon-status-processing</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-together"></use>
                </svg>
                <div class="name">状态-协同处理</div>
                <div class="code-name">#icon-status-together</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-pause"></use>
                </svg>
                <div class="name">状态-暂停</div>
                <div class="code-name">#icon-status-pause</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-transfer"></use>
                </svg>
                <div class="name">状态-转移</div>
                <div class="code-name">#icon-status-transfer</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-complete"></use>
                </svg>
                <div class="name">状态-完成</div>
                <div class="code-name">#icon-status-complete</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangdingyuming"></use>
                </svg>
                <div class="name">绑定域名-01</div>
                <div class="code-name">#icon-bangdingyuming</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye1"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-reciprocation"></use>
                </svg>
                <div class="name">状态-回报</div>
                <div class="code-name">#icon-status-reciprocation</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-dispatch"></use>
                </svg>
                <div class="name">状态-派单</div>
                <div class="code-name">#icon-status-dispatch</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-transfer-order"></use>
                </svg>
                <div class="name">状态-转单</div>
                <div class="code-name">#icon-status-transfer-order</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-obsolete"></use>
                </svg>
                <div class="name">状态-作废</div>
                <div class="code-name">#icon-status-obsolete</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-review"></use>
                </svg>
                <div class="name">状态-审核</div>
                <div class="code-name">#icon-status-review</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-together1"></use>
                </svg>
                <div class="name">状态-协同</div>
                <div class="code-name">#icon-status-together1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanwangxunxian1"></use>
                </svg>
                <div class="name">官网巡线1</div>
                <div class="code-name">#icon-guanwangxunxian1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuli1"></use>
                </svg>
                <div class="name">图例1</div>
                <div class="code-name">#icon-tuli1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-news"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-news</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#icon-calendar</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-overrule"></use>
                </svg>
                <div class="name">状态-驳回</div>
                <div class="code-name">#icon-status-overrule</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-overrule-outline"></use>
                </svg>
                <div class="name">状态-驳回空心</div>
                <div class="code-name">#icon-status-overrule-outline</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-status-transfer-outline"></use>
                </svg>
                <div class="name">状态-转移空心</div>
                <div class="code-name">#icon-status-transfer-outline</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huarunranqilogo"></use>
                </svg>
                <div class="name">华润燃气logo</div>
                <div class="code-name">#icon-huarunranqilogo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huarun"></use>
                </svg>
                <div class="name">华润</div>
                <div class="code-name">#icon-huarun</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location-point"></use>
                </svg>
                <div class="name">定位点</div>
                <div class="code-name">#icon-location-point</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-measuring-area"></use>
                </svg>
                <div class="name">测面积</div>
                <div class="code-name">#icon-measuring-area</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-measuring-distance"></use>
                </svg>
                <div class="name">测距离</div>
                <div class="code-name">#icon-measuring-distance</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-play</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pause"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-pause</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiedan"></use>
                </svg>
                <div class="name">接单</div>
                <div class="code-name">#icon-jiedan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paidan"></use>
                </svg>
                <div class="name">派单</div>
                <div class="code-name">#icon-paidan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongguo"></use>
                </svg>
                <div class="name">通过</div>
                <div class="code-name">#icon-tongguo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuidan"></use>
                </svg>
                <div class="name">退单</div>
                <div class="code-name">#icon-tuidan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuofei1"></use>
                </svg>
                <div class="name">作废</div>
                <div class="code-name">#icon-zuofei1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daichuli"></use>
                </svg>
                <div class="name">待处理</div>
                <div class="code-name">#icon-daichuli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yibohui"></use>
                </svg>
                <div class="name">已驳回</div>
                <div class="code-name">#icon-yibohui</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yichuli"></use>
                </svg>
                <div class="name">已处理</div>
                <div class="code-name">#icon-yichuli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijiedan"></use>
                </svg>
                <div class="name">已接单</div>
                <div class="code-name">#icon-yijiedan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yipaidan"></use>
                </svg>
                <div class="name">已派单</div>
                <div class="code-name">#icon-yipaidan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiquxiao"></use>
                </svg>
                <div class="name">已取消</div>
                <div class="code-name">#icon-yiquxiao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yishenhe"></use>
                </svg>
                <div class="name">已审核</div>
                <div class="code-name">#icon-yishenhe</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yituidan"></use>
                </svg>
                <div class="name">已退单</div>
                <div class="code-name">#icon-yituidan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feihuanbiaoweixiu"></use>
                </svg>
                <div class="name">非换表维修</div>
                <div class="code-name">#icon-feihuanbiaoweixiu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feikanchaguabiaoyewu"></use>
                </svg>
                <div class="name">非勘察挂表业务</div>
                <div class="code-name">#icon-feikanchaguabiaoyewu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guabiaoyewu"></use>
                </svg>
                <div class="name">挂表业务</div>
                <div class="code-name">#icon-guabiaoyewu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guabiaokancha"></use>
                </svg>
                <div class="name">挂表勘察</div>
                <div class="code-name">#icon-guabiaokancha</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qifengtongqi"></use>
                </svg>
                <div class="name">启封通气</div>
                <div class="code-name">#icon-qifengtongqi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianchanggaizao"></use>
                </svg>
                <div class="name">现场改造</div>
                <div class="code-name">#icon-xianchanggaizao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huanbiaoweixiu"></use>
                </svg>
                <div class="name">换表维修</div>
                <div class="code-name">#icon-huanbiaoweixiu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaizaokancha"></use>
                </svg>
                <div class="name">改造勘察</div>
                <div class="code-name">#icon-gaizaokancha</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cailiaoguanli"></use>
                </svg>
                <div class="name">材料管理</div>
                <div class="code-name">#icon-cailiaoguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-ditu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaodu"></use>
                </svg>
                <div class="name">调度</div>
                <div class="code-name">#icon-tiaodu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dongtaibiaodanguanli"></use>
                </svg>
                <div class="name">动态表单管理</div>
                <div class="code-name">#icon-dongtaibiaodanguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye1"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianxitongguanli"></use>
                </svg>
                <div class="name">文件系统管理</div>
                <div class="code-name">#icon-wenjianxitongguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duanxinguanli"></use>
                </svg>
                <div class="name">短信管理</div>
                <div class="code-name">#icon-duanxinguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongquanxianguanli"></use>
                </svg>
                <div class="name">系统权限管理</div>
                <div class="code-name">#icon-xitongquanxianguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhushujuguanli"></use>
                </svg>
                <div class="name">主数据管理</div>
                <div class="code-name">#icon-zhushujuguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liuchengguanli"></use>
                </svg>
                <div class="name">流程管理</div>
                <div class="code-name">#icon-liuchengguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-appbanbenguanli"></use>
                </svg>
                <div class="name">app版本管理</div>
                <div class="code-name">#icon-appbanbenguanli</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiao"></use>
                </svg>
                <div class="name">取消</div>
                <div class="code-name">#icon-quxiao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyue"></use>
                </svg>
                <div class="name">预约</div>
                <div class="code-name">#icon-yuyue</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#icon-icon-test</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#icon-icon-minus</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-xiala</div>
            </li>

          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
